<template>
    <div :class="isUpdate&&'fadeIn'">
        <div v-if="templateStyle==='level-4'||templateStyle==='level-3'">
            <div class="theme-1" v-if="content.image||content.video">
                <div class="template-content" :class="templateStyle">
                    <div class="top-box">
                        <p class="description">{{content.description || ""}}</p>
                        <div class="img-border">
                            <loading-image class="teacher-img" alt=""
                                           :src="addPrefixHost(content.image)" v-if="content.image"></loading-image>
                            <video :src="addPrefixHost(content.video)" ref="video" controls="controls"
                                   @click="videoControl" v-if="content.video">
                            </video>
                        </div>
                        <ul class="questions">
                            <li v-for="item in content.questions">
                                {{item}}
                            </li>
                        </ul>
                    </div>
                    <div class="under-box">
                                <textarea class="bottom-answer"
                                          placeholder="Please enter your answer here if Chinese input is possible on your keyboard.  If not, please save your handwriting in a separate file and upload it using the button on the right."
                                          @input = "answerHandler($event)"
                                v-model="text"></textarea>
                        <label class="upload-btn">
                            <input type="file" style="display: none" @change="getFile($event)" >
                        </label>
                    </div>
                </div>
            </div>
            <div class="theme-2" v-else>
                <div class="template-content">
                    <div class="top-box">
                        <p class="description">{{content.description}}</p>
                    </div>
                    <ul class="question">
                        <li v-for="item in content.questions">
                            <p>{{item}}</p>
                        </li>
                    </ul>
                    <div class="under-box">
                                <textarea class="bottom-answer"
                                          placeholder="Please type your answer here if Chinese input is available on your keyboard.  If not, please save your handwriting in a separate file and upload it using the button on the right."
                                          @input = "answerHandler($event)"
                                          v-model="text"></textarea>
                        <label class="upload-btn">
                            <input type="file" style="display: none" @change="getFile($event)"></label>

                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="coming-soon"></div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapActions, mapMutations} from 'vuex';
    import R from 'ramda';
    import loadingImage from '~/components/loadingImage';
    import axios from 'axios';
    import utils from '~/plugins/utils';

    export default {
        async fetch({store, params}) {
            await store.dispatch("index/exercise/index/setContentInfo", params);
        },

        data() {
            return {
                isUpdate: false,
                file: '',
                text: ''
            }
        },
        methods: {
            videoControl: function () {
                if (this.$refs.video.paused) {
                    this.$refs.video.play();
                } else {
                    this.$refs.video.pause();
                }
            },
            ...mapMutations('index/exercise/index', [
                'CompareControl','UPLOAD_FILE'
            ]),
            ...mapActions('index/exercise/index', [
                'uploadFile','setAnswer','setMyAnswer'
            ]),
            getFile(event) {
                let msg;
                msg = '';
              this.uploadFile(event.target.files[0]);
//              if(!this.content.questions[0]===''){
//                  for(let p of this.content.questions){
//                      msg +=p+'、'
//                  }
//              }else{
                  msg = this.content.description;
//              }
              this.setAnswer({
                  answer: true,
                  msg: msg
              })
                console.log(this.content);
            },
            answerHandler(ev){
                let msg;
                msg = '';
                msg = this.content.description;
                this.setAnswer({
                    answer: true,
                    msg: msg
                })
                this.setMyAnswer(ev.target.value);
            },
            init() {
                this.$nextTick(_ => {
                    this.CompareControl(false);
                })
            }
        },
        destroyed() {
            this.CompareControl(null);
        },
        mounted() {
            this.init();
        },
        created() {
        },
        computed: {
            ...mapState('index/exercise/index', {
                templateStyle: state => state.templateStyle,
                content: state => state.contentInfo ? state.contentInfo.content : {},
                showCompare: state => state.showCompare,
                templates: state => state.templates
            }),
            userInfo() {
                return this.$store.state.authUser;
            },
        },
        watch: {
            content() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                this.text = '';
                const initData = {};
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600)
                this.init();
            }
        },
        components: {loadingImage,}
    }
</script>

<style lang="less" scoped>
    .fadeIn {
        animation: fadeIn .4s ease-in;
        transform: translateZ(0);
    }

    @keyframes fadeIn {
        from {
            transform-origin: left;
            transform: scaleX(.4);
            opacity: 0;
        }
    }

    .coming-soon {
        width: 600px;
        height: 236px;
        margin: 100px auto auto auto;
        background: url(~~assets/img/exercise/coming.png) no-repeat;
        background-size: 100% 100%;
    }

    .theme-1 {
        .template-content {
            width: 700px;
            margin: 4% 0 0 25.5%;
        }
        .template-content .top-box {
            width: 910px;
            margin-top: -20px;
        }
        .template-content .img-border {
            width: 320px;
            height: 228px;
            display: inline-block;
            box-sizing: border-box;
            video {
                border-radius: .05rem;
                width: 100%;
                height: 100%;
                cursor: pointer;
                -o-object-fit: fill;
                object-fit: fill;
            }
        }
        .level-3 {
            .img-border {
                background: url(~~assets/img/main_content/exercise/picture-border-yellow.png) no-repeat;
                background-size: contain;
                padding: .1rem .1rem .17rem .1rem;
            }
        }
        .level-4 {
            .img-border {
                background: url(~~assets/img/main_content/exercise/picture-border.png) no-repeat;
                background-size: contain;
                padding: .12rem .16rem .26rem .2rem;
            }
        }
        .template-content .img-border .teacher-img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
            display: inline-block;
        }
        .template-content .questions {
            font-weight: 600;
            text-align: left;
            line-height: 30px;
            font-size: 28px;
            vertical-align: top;
            display: inline-block;
            white-space: pre-line;
            width: 530px;
            min-height: 260px;
            margin-left: 15px;
        }
        .description {
            font-weight: 600;
            color: #fff;
            font-size: .28rem;
            /* text-align: center; */
            display: block;
            width: 8rem;
            margin-bottom: 20px;
            /* margin: 0 auto; */
        }
        .bottom-answer {
            width: 305px;
            height: 156px;
            margin-right: 50px;
            background: url(~~assets/img/main_content/exercise/textarea-bg.png) no-repeat;
            background-size: 100% 100%;
            padding: 9px 20px;
            border: none;
            outline: none;
            border-radius: 5px;
            overflow: hidden;
            font-style: normal;
            font-size: 20px;
            color: #333;
            line-height: normal;
            display: inline-block;
            cursor: pointer;
            vertical-align: middle;
        }
        .template-content .upload-btn {
            display: inline-block;
            background: url(~~assets/img/main_content/exercise/upload.png) no-repeat;
            background-size: 100% 100%;
            width: 221px;
            height: 149px;
            vertical-align: middle;
            cursor: pointer;
        }
    }

    .theme-2 {
        text-align: center;
        .template-content {
            min-width: 740px;
            display: inline-block;
            margin-top: 30px;
        }
        .top-box {
            text-align: center;
        }
        .description {
            font-weight: 700;
            color: #fff;
            text-align: left;
            line-height: 34px;
            display: inline-block;
            font-size: 32px;
            vertical-align: middle;
            white-space: pre-line;
            max-width: 800px;
            margin-bottom: 20px;
        }
        .question {
            color: #3c4e80;
            text-align: center;
            line-height: 1.4;
            font-size: 24px;
            vertical-align: middle;
            width: 800px;
            margin-bottom: 20px;
            li {
                p {
                    display: inline-block;
                    vertical-align: middle;
                    text-align: left;
                }
            }
        }
        .bottom-answer {
            width: 305px;
            height: 156px;
            margin-right: 50px;
            background: url(~~assets/img/main_content/exercise/textarea-bg.png) no-repeat;
            background-size: 100% 100%;
            padding: 9px 20px;
            border: none;
            outline: none;
            border-radius: 5px;
            overflow: hidden;
            font-style: normal;
            font-size: 20px;
            color: #333;
            line-height: normal;
            display: inline-block;
            cursor: pointer;
            vertical-align: middle;
        }
        .template-content .upload-btn {
            display: inline-block;
            background: url(~~assets/img/main_content/exercise/upload.png) no-repeat;
            background-size: 100% 100%;
            width: 221px;
            height: 149px;
            vertical-align: middle;
            cursor: pointer;
        }
    }
</style>
